<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Liubuzhu
  Date: 2023/12/11
  Time: ฅ(΅•ㅅ•΅❀)ฅ 16:10
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>首页</title>
  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    .b-example-divider {
      height: 3rem;
      background-color: rgba(0, 0, 0, .1);
      border: solid rgba(0, 0, 0, .15);
      border-width: 1px 0;
      box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }

    .b-example-vr {
      flex-shrink: 0;
      width: 1.5rem;
      height: 100vh;
    }

    .bi {
      vertical-align: -.125em;
      fill: currentColor;
    }

    .nav-scroller {
      position: relative;
      z-index: 2;
      height: 2.75rem;
      overflow-y: hidden;
    }

    .nav-scroller .nav {
      display: flex;
      flex-wrap: nowrap;
      padding-bottom: 1rem;
      margin-top: -1px;
      overflow-x: auto;
      text-align: center;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .gradient-text {
      background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
      -webkit-background-clip: text;
      color: transparent;
    }
  </style>
  <link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css"/>">
  <link href="<c:url value="/css/carousel.css"/>" rel="stylesheet">
  <script src="<c:url value="/js/bootstrap.bundle.min.js"/>"></script>
  <script src="<c:url value="/js/bootstrap.min.js"/>"></script>
</head>
<body>

<main>
  <jsp:include page="/view/common/header.jsp"></jsp:include>

  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="<c:url value="/img/home/benghuai.jpg"/>" >
        <div class="container">
          <div class="carousel-caption text-start">
            <h1>崩坏</h1>
            <p>好玩好玩好玩好玩好玩</p>
            <p><a class="btn btn-lg btn-primary" href="#">了解更多</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="<c:url value="/img/home/yuanshen.jpg"/>">
        <div class="container">
          <div class="carousel-caption">
            <h1>原神</h1>
            <p>好玩好玩好玩好玩好玩</p>
            <p><a class="btn btn-lg btn-primary" href="#">了解更多</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="<c:url value="/img/home/huanta.jpg"/>" >
        <div class="container">
          <div class="carousel-caption text-end">
            <h1>幻塔</h1>
            <p>好玩好玩好玩好玩好玩</p>
            <p><a class="btn btn-lg btn-primary" href="#">了解更多</a></p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>


  <div class="container marketing" >

    <hr class="featurette-divider">

    <div class="row featurette" style="margin-left: 50px">
      <div class="col-md-7">
        <h2 class="featurette-heading fw-normal lh-1">一起玩PC好游戏</h2>
        <p class="lead">高品质游戏齐聚FunPlay</p>
      </div>
      <div class="col-md-5">
        <img src="<c:url value="/img/home/w1.png"/>" >
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette" style="margin-left: 50px">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading fw-normal lh-1">一起发现大家最爱的那款</h2>
        <p class="lead">全新界面，呈现热门游戏</p>
      </div>
      <div class="col-md-5 order-md-1">
        <img src="<c:url value="/img/home/w2.png"/>" >
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette" style="margin-left: 50px">
      <div class="col-md-7">
        <h2 class="featurette-heading fw-normal lh-1">一起迎接每一次挑战</h2>
        <p class="lead">游戏内外，助手功能全面助力</p>
      </div>
      <div class="col-md-5">
        <img src="<c:url value="/img/home/w3.png"/>" >
      </div>
    </div>
  </div>

  <jsp:include page="/view/common/footer.jsp"></jsp:include>

</body>
</html>
